<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  export let exclude = [];
  export let classes = "";
  let child: HTMLElement;
  const dispatch = createEventDispatcher();
  function isExcluded(target) {
    let parent = target;
    while (parent) {
      if (exclude.indexOf(parent) >= 0 || parent === child) {
        return true;
      }
      parent = parent.parentNode;
    }
    return false;
  }
  function onClickOutside(event) {
    if (!isExcluded(event.target)) {
      dispatch('clickoutside');
    }
  }
</script>

<svelte:body on:click={onClickOutside} />
<div class={classes} bind:this={child}>
  <slot></slot>
</div>